<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery-ui.js" type="text/javascript"></script>
<script src="/js/jquery-cookie.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // hide the left bar if the 'leftbar_visible' cookie is explicitly set to false.
        if($.cookie('leftbar_visible') == 'false') {
            $("#leftbar").hide();
        }

        // set up the blank column next to the left nav bar as toggle controller
        var leftbarToggleCtrl = $("#leftbar").next();
        // make it look different and clickable
        leftbarToggleCtrl.css({'background-color':'blue', cursor:'pointer'});
        // toggle visibility of left bar when clicked
        leftbarToggleCtrl.bind('click', function() {
            // set the cookie to the opposite of the current visibility, as we're about to toggle it.
            $.cookie('leftbar_visible', !$("#leftbar").is(':visible'), { expires: 7 });
            $("#leftbar").toggle('slow');
        });

        // if there is a sort order in the cookie, restore it.
        restoreTableOrder();

        // make the all the columns in the "main" table drag and drop enabled
        var sortables = $('table[summary=main]>tbody>tr:not(:first)>td:has(table)');
        sortables.sortable({
            items:'table',
            handle:'tr:first',
            connectWith: sortables,
            // save order to cookie
            stop:saveTableOrder,
            // make sure the dragged items maintain their width.
            start: function(e,ui) {
                ui.helper.css("width", ui.item.width());
            }
        });
    });

    function saveTableOrder(e, ui) {
        // serialTableOrder = <table name>,<table name>,<table name>&<repeat...> // '&' marks the next sortable column ordering
        var serialTableOrder = '';
        var sortables = $('table[summary=main]>tbody>tr:not(:first)>td:has(table)');
        sortables.each(function() {
            serialTableOrder += $(this).sortable('toArray', 'summary').join(',') + '&';
        });
        console.log('save: ' + serialTableOrder);
        $.cookie('table_order', serialTableOrder, { expires: 7 });
    }

    function restoreTableOrder() {
        var serialTableOrder = $.cookie('table_order');
        // if the cookie is set, we need to rearrange the order of the sortables.
        if(serialTableOrder) {
            console.log('restore: ' + serialTableOrder);
            // the sortable columns
            var sortables = $('table[summary=main]>tbody>tr:not(:first)>td:has(table)');

            // decontruct the cookie and apply its order
            $(serialTableOrder.split('&')).each(function(sortableIdx) {
                // figure out the target column for this set of tables
                var targetCol = sortables.eq(parseInt(sortableIdx));
                // append each listed table to the correct sortable column (side effect: removes item from current location)
                $(this.split(',')).each(function() {
                    targetCol.append($('table[summary="' + this + '"]'));
                });
            });
        }
    }
</script>